Skip to content

Conversation

@KaelWD
Copy link
Member

@KaelWD KaelWD commented May 6, 2024

https://m3.material.io/foundations/layout/applying-layout/window-size-classes

-55px for edge's stupid sidebar
reduced xxl to 4k at 175% scaling

@KaelWD KaelWD marked this pull request as ready for review November 6, 2025 08:44
@KaelWD KaelWD requested a review from a team November 6, 2025 08:44
@J-Sek
Copy link
Contributor

J-Sek commented Nov 6, 2025

I always though there is something off about those defaults.
Hopefully Google guidelines are backed by some real science.

My only concern is the impact on $container-max-widths:

  • md: 900 » 787.5
  • lg: 1200 » 1073.4375
  • xl: 1800 » 1448.4375
  • xxl: 2400 » 2004.375

With rounding down to nearest 100px we would get: 700, 1000, 1400, 2000

100 * math.floor(map.get($grid-breakpoints, 'md') * 0.009375)
// or with math.div() to make it more obvious:
// 100 * math.floor(math.div(map.get($grid-breakpoints, 'md') * 0.9375, 100))

@KaelWD
Copy link
Member Author

KaelWD commented Nov 7, 2025

My biggest problem with the current ones is that they exactly match common screen resolutions (especially xl and xxl). Any sort of sidebar like edge's or firefox vertical tabs bumps you down a breakpoint for no real reason.

$container-max-widths

Yeah that seems better actually. Many screen sizes will still get a wider container with that change eg. 1080p goes from 1200 to 1400px.

@KaelWD
Copy link
Member Author

KaelWD commented Nov 7, 2025

We could actually use container queries now, any thoughts on these questions? #18983 (comment)

@J-Sek
Copy link
Contributor

J-Sek commented Nov 7, 2025

sidebar like edge's or firefox vertical tabs bumps you down a breakpoint

I think that ~55px margin is going to be perfect to account for this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

E: display Display composable T: feature A new feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants